var ImageBrowser = {};

ImageBrowser.build = function(opts) {
    var width = opts.width;
    var height = opts.height;
    var list = opts.list;

    var b = [];
    b[b.length] = "<div class=\"slider-panel\">";
    b[b.length] = "<div class=\"slider\">";
    b[b.length] = "    <div class=\"sliderbox\" style=\"width: " + width + "px; height: " + height + "px;\"><img src=\"about:blank\"/></div>";
    b[b.length] = "    <span class=\"img-prev\" hidefocus=\"true\" ondragstart=\"return false;\" ondblclick=\"return false;\"><span class=\"img-switch-btn\"></span></span>";
    b[b.length] = "    <span class=\"img-next\" hidefocus=\"true\" ondragstart=\"return false;\" ondblclick=\"return false;\"><span class=\"img-switch-btn\"></span></span>";
    b[b.length] = "</div>";
    b[b.length] = "<div class=\"sliderbar\">";

    for(var i = 1; i <= list.length; i++) {
        if(i == 1) {
            b[b.length] = "<a class=\"active\" index=\"" + i + "\">" + i + "</a>";
        }
        else {
            b[b.length] = "<a class=\"\" index=\"" + i + "\">" + i + "</a>";
        }
    }

    b[b.length] = "</div>";
    b[b.length] = "</div>";
    return b.join("");
};

ImageBrowser.resize = function(img, maxWidth, maxHeight){
    if(img.readyState != "complete") {
    }

    img.style.width = "auto";
    img.style.height = "auto";
    var widthHeight = (img.offsetWidth / img.offsetHeight);
    var heightWidth = (img.offsetHeight / img.offsetWidth);

    var realWidth = maxWidth
    var realHeight = Math.floor(maxWidth / widthHeight);

    if(realHeight > maxHeight) {
        realHeight = maxHeight;
        realWidth = Math.floor(maxHeight / heightWidth);
    }

    if(img.offsetWidth < maxWidth && img.offsetHeight < maxHeight) {
        realWidth = img.offsetWidth
        realHeight = img.offsetHeight;
    }

    // img.style.marginTop = Math.floor((maxHeight - realHeight) / 2) + "px";
    // img.style.marginLeft = Math.floor((maxWidth - realWidth) / 2) + "px";
    img.style.width = realWidth + "px";
    img.style.height = realHeight + "px";
};

ImageBrowser.render = function(id, opt) {
    var src = null;
    var html = ImageBrowser.build(opt);

    if(typeof(id) == "string") {
        src = jQuery("#" + id);
    }
    else {
        src = id;
    }

    jQuery(src).html(html);
    var container = src.find("div.slider-panel");
    container.attr("img-list", JSON.stringify(opt.list));

    container.find("div.sliderbox img").click(function(){
        window.open(jQuery(this).attr("src"), "_blank");
    });

    container.find("div.sliderbox img").bind("load", function(){
        ImageBrowser.resize(this, opt.width, opt.height);
    });

    container.change(function() {
        var list = null;
        var src = jQuery(this);
        var index = parseInt(src.attr("index"));

        try {
            list = window.eval("(" + src.attr("img-list") + ")");
        }
        catch(e) {
        }

        if(isNaN(index) || list == null || list.length < 0 || index < 0 || index > list.length) {
            return;
        }

        src.find("div.sliderbar a").removeClass("active");
        src.find("div.sliderbar a[index=" + (index + 1) + "]").addClass("active");

        var img = list[index];
        src.find("div.sliderbox img").attr("src", img.image);
        src.find("div.sliderbox img").attr("title", "点击查看大图");
    });

    container.find("span.img-prev").click(function() {
        var src = jQuery(this).closest("div.slider-panel");
        var index = parseInt(src.attr("index"));
        var list = null;

        try {
            list = window.eval("(" + src.attr("img-list") + ")");
        }
        catch(e) {
        }

        if(isNaN(index) || list == null || list.length < 0 || index < 0 || index > list.length) {
            return;
        }

        index--;

        if(index < 0) {
            index = list.length - 1;
        }

        src.attr("index", index);
        src.change();
        return false;
    });

    container.find("span.img-next").click(function() {
        var src = jQuery(this).closest("div.slider-panel");
        var index = parseInt(src.attr("index"));
        var list = null;

        try {
            list = window.eval("(" + src.attr("img-list") + ")");
        }
        catch(e) {
        }

        if(isNaN(index) || list == null || list.length < 0 || index < 0 || index > list.length) {
            return;
        }

        index++;

        if(index >= list.length) {
            index = 0;
        }

        src.attr("index", index);
        src.change();
        return false;
    });

    container.find("div.sliderbar a").click(function() {
        var index = parseInt(jQuery(this).attr("index"));

        if(isNaN(index) || index < 1) {
            return;
        }

        jQuery(this).closest("div.slider-panel").attr("index", index - 1);
        jQuery(this).closest("div.slider-panel").change();
    });
    container.find("div.sliderbar a:first").click();
};

jQuery(function(){
    jQuery("img.img").click(function() {
        var src = jQuery(this);
        var href = src.attr("href");

        if(href == null) {
            href = src.attr("src");
        }
        window.open(href, "_blank");
    });

    jQuery("div.img-list").each(function() {
        var src = jQuery(this);
        var list = [];

        if(src.attr("start") != null) {
            var start = parseInt(src.attr("start"));
            var end = parseInt(src.attr("end"));
            var pattern = src.attr("pattern");

            for(var i = start; i <= end; i++) {
                list[list.length] = {"image": pattern.replace("${index}", i), "title": ""};
            }
        }
        else {
            src.find("a").each(function() {
                var href = jQuery(this).attr("href");
                var title = jQuery(this).attr("href");
                list[list.length] = {"image": href, "title": title};
            });
        }

        src.attr("img-list", JSON.stringify(list));

        var e = jQuery("#image_browser_panel");

        if(e.size() < 1) {
            jQuery("body").append("<div id=\"image_browser_panel\" style=\"position: absolute; display: none;\"></div>");
        }

        var title = src.attr("title");

        if(title == null) {
            title = "图册";
        }

        src.html([
                "<div style=\"padding-top: 20px; border: 0px solid #c0c0c0;\">",
                "<p style=\"text-align: center;\"><img class=\"img-first\" src=\"about:blank;\" style=\"width: 400px; height: 400px; border: none; cursor: pointer;\"/></p>",
                "<p style=\"text-align: center;\"><a style=\"text-decoration: none; font-size: 12px; color: #555555;\" href=\"\">" + title + "</a><sup style=\"color: #36c;\">[" + list.length + "]</sup></p>",
                "</div>"].join(""));

        src.find("img.img-first").bind("load", function() {
            ImageBrowser.resize(this, 600, 400);
        });

        src.find("img.img-first").attr("src", list[0].image);
        src.find("img.img-first").click(function() {
            var parent = jQuery(this).closest("div.img-list");
            var list = null;

            try {
                list = window.eval("(" + parent.attr("img-list") + ")");
            }
            catch(e) {
            }

            var width = document.documentElement.clientWidth + "px";
            var height = document.documentElement.clientHeight + "px";

            jQuery("#image_browser_panel").css({"width": width, "height": height});
            ImageBrowser.render("image_browser_panel", {"width": 600, "height": 484, "list": list});
            Dialog.open("image_browser_panel");
        });
        src.show();
    });
});
